<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>Hello React5 World</title>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="rootdiv"></div>
this is a test

<div id="testimg">aaa</div>
<div id="testlist">aaa</div>
this is a test1
<script type="text/babel">

    function onClick() {
        alert("按钮被点击");
    }
    const user = {
        name: 'Hedy Lamarr',
        imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
        imageSize: 90,
    };

    function MyApp() {
        return <>
            <h1>Hello, world!</h1>
            <button onClick={onClick}>clickme</button>
            <h1>{user.name}</h1>
            <img
                className="avatar"
                src={user.imageUrl}
                alt={'Photo of ' + user.name}
                style={{
                    width: user.imageSize,
                    height: user.imageSize
                }}

                />
        </>
    }


    const container = document.getElementById('rootdiv');
    const root = ReactDOM.createRoot(container);
    root.render(<MyApp/>);


    const products = [
        {title: 'Cabbage', id: 1,isFruit: true},
        {title: 'Garlic', id: 2},
        {title: 'Apple', id: 3},
    ];

    function ShoppingList() {
        const listItems = products.map(product =>
            <li
                key={product.id}
                style={{
                    color: product.isFruit ? 'blue' : 'darkgreen'
                }}
            >
                {product.title}
            </li>
        );

        return (
            <ul>{listItems}</ul>
        );
    };


    ReactDOM.createRoot(document.getElementById('testlist')).render(<ShoppingList/>);


</script>


<!--
  Note: this page is a great way to try React but it's not suitable for production.
  It slowly compiles JSX with Babel in the browser and uses a large development build of React.

  Read this page for starting a new React project with JSX:
  https://react.dev/learn/start-a-new-react-project

  Read this page for adding React with JSX to an existing project:
  https://react.dev/learn/add-react-to-an-existing-project
-->
</body>
</html>